require('./Pagehead.styl');

const {Toast,Context,Boxs,Grid,Icon,SwitchField,Group,Tab,Calendar,DatetimeField,Scroller,list} = SaltUI;
const timeStart = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+1;
const timeToday = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+new Date().getDate();
const timeSpace = (new Date().getYear()+ 1900)+'.'+(new Date().getMonth()+1)+'.'+(new Date().getDate()-15);
const png = require('../../images/11.jpg');
const selectPng = require('../../images/22.png');
let HBox = Boxs.HBox;
let Box = Boxs.Box;
class Pagehead extends React.Component {
    static defaultProps = {
        pageTitle:"本月小结"
    };

    constructor(props) {
        super(props);
       
        this.state = {
            tabContent:{},
            headData:{},
            date:new Date(),
            show:false,
            searchStartTime:timeSpace,
            searchEndTime:timeToday,
        };
    }
     //日期按钮点击
     handleClickDate(){

        console.log('日期被点击了');
        let t = this;
        t.setState({
            show: true
        });
    }
    onCloseCalendar() {
        let t = this;
        t.setState({
            show: false
        });
    }
    handleCalendarData(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
       console.log(JSON.stringify(values));
       let date1 = values.endDate;
       let date = new Date(date1);
       let month = date.getMonth()+1;
       let day = date.getDate();
       let year =date.getFullYear();
       console.log(month+'-'+year );
       let endTime = year+'-'+month+'-'+day;
       date1 = values.startDate;
       date = new Date(date1);
       month = date.getMonth()+1;
       day = date.getDate();
       year =date.getFullYear();
       let startTime = year+'-'+month+'-'+day;
        let t = this;
        t.setState({
            show: false,
            searchEndTime:endTime,
            searchStartTime:startTime
        });
    }
    handleClickImg(){
        let t = this;
        t.setState({
            selected:!t.state.selected
        });
    }
    handleClickSearch(){
        console.log('搜索内容'+this.state.searchStartTime+','+this.state.searchEndTime);
    }
    handleClick(workNo) {
        Toast.show({
            type: 'loading',
            content: 'Loading'
        });
        //Action触发时，需要指定actionName
        Actions.fetchData({
            workNo: workNo
        }, function(data) {
            // Toast.hide();
            // console.log(JSON.stringify(data));
        });
    }
    //显示为日常班还是公休
    getDay(date){
          let week=''; 
          let DateObject =new Date(date.replace(/-/g, "/"));
          if(DateObject.getDay()==0||6) week="公休"
          if(DateObject.getDay()==1||2||3||4||5) week="日常班"
          return week;
      }
     //获取小时时间 
    getTime(values){
          let D = new Date(values);
          let h = D.getHours();
          let i = D.getMinutes();
          let s = D.getSeconds();
          let  startTime = h+':'+i+':'+s;
          return startTime;
      }
      //获取日期格式
    getDate(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
          let date = new Date(values);
          let month = date.getMonth()+1;
          let day = date.getDate();
          let year =date.getFullYear();
          let startDate= year+'-'+month+'-'+day;
          return startDate;
    }
 handleChange() {

    }
    handleOnLeftClick(){
        self.location.hash='home';
    }
    gettabTitleList(){
        const list = ["月度积分绩效明细","月度积分绩效排行","累计积分绩效排行"];
    }
    getTimeInterval(){
  
        return (this.state.date.getDate()==1)?('('+timeStart+')'):'('+(timeStart+'-'+timeToday)+')';
    }
    getMonthLen(year,month){
        let nextMonth = new Date(year,month+1,1); //获取下个月的第一天
        nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
        return nextMonth.getDate(); //返回当天日期
    }
    tick() {
        this.setState({
            date: new Date()
        });
    }

    //显示为日常班还是公休
    getDay(date){
          let week=''; 
          let DateObject =new Date(date.replace(/-/g, "/"));
          if(DateObject.getDay()==0||6) week="公休"
          if(DateObject.getDay()==1||2||3||4||5) week="日常班"
          return week;
      }
     //获取小时时间 
    getTime(values){
          let D = new Date(values);
          let h = D.getHours();
          let i = D.getMinutes();
          let s = D.getSeconds();
          let  startTime = h+':'+i+':'+s;
          return startTime;
      }
      //获取日期格式
    getDate(values) {
    //#TODO限制用户选择时间的截止日期为今天登陆时间
          let date = new Date(values);
          let month = date.getMonth()+1;
          let day = date.getDate();
          let year =date.getFullYear();
          let startDate= year+'-'+month+'-'+day;
          return startDate;
    }
     handleChange() {

    }
    render() {
        let t= this;
        return (
             //必须需要只有一个顶部标签
            <div className="pagehead">             
                <div className="t-FAC t-PT10 marginSpace">
                     {this.props.pageTitle}
                    <div className="t-FAC t-PT10">{t.getTimeInterval()}</div>
                </div> 
                <div className="t-PT10">
                     {this.props.tabContent?this.props.tabContent.map(function(item,index) {
                         if(index%2==1)
                         return;
                         else
                         return (
                              <HBox>
                             <Box flex={1} className="button-border t-FAC" >
                                 <span >{t.props.tabContent[index]}</span>
                             </Box>
                             <Box flex={1} className="button-border t-FAC">
                                 <span>{t.props.tabContent[index+1]}</span>
                             </Box>                       
                            </HBox>
                         );
                      
                     }):
                      (<div></div>)}                                             
                    
                </div>
                <div>
                     <div className="t-FS16 t-MT10 t-FAC">自助查询</div>
                     <Tab className="T-LH30 " onChange={t.handleChange.bind(t)} >
                         {this.props.tabTitle?this.props.tabTitle.map(function(item,index) {
                         return (
                             <Tab.Item title={item}>
                                  <div className="t-MT10 T-CL">
                                      {index<3&&<span className='search t-PL10'>年份<img className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>}
                                      {index<2&&<span className='search t-PL10 '>月份<img  className='foo' src={png} width={16} onClick={t.handleClickDate.bind(t)}/></span>}
                                      {index<1&&<span className='search'>姓名选框</span>}
                                      {index<3&&<span className='search-button t-MR10 t-FR' onClick={t.handleClickSearch.bind(t)}>搜索</span>}
                                  </div>  
                                  <div className="t-MT6">
                                        <HBox >
                                            {t.props.tabitemTitle[index].map((item,index)=>{return (<Box flex={1} className="t-FAC widthRatio">{item}</Box>);})}                                                 
                                       </HBox>
                                  </div> 
                                  <div className="tLH1_5 t-P10">  
                                      <Scroller className='widthRatio1'>
                                             <Group>
                                                 <Group.List lineIndent={0} itemIndent={0}>
                                                          {
                                                             t.props.subContent.list ?
                                                             t.props.subContent.list.map(function(item,index) {                                               
                                                                  return (
                                                                            <div className="t-LH44 t-FBH t-FBAC" onClick={t.handleClick.bind(t, item.workNo)}>
                                    
                                                                                <div className="t-FB1 t-PL10">
                                                                                   
                                                                                    <span className='' ></span>
                                                                                  
                                                                                    
                                                                                </div>
                                                                             </div>
                                                                         )
                                                                         }) : 
                                                            (
                                                                <div className="t-PL10 t-LH44 t-FBH t-FBAC t-FBJC">
                                                                    {t.props.error ? 'Error' : 'No data'}
                                                                </div>
                                                            )
                                                         }
                                                       </Group.List>
                                             </Group>
                                         </Scroller>       
                                  </div>                       
                             </Tab.Item>
                       );     
                     }):
                      (<div></div>)}  
                         
                      </Tab>

                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
         clearInterval(this.timerID); 
    }
}

module.exports = Pagehead;
